<style lang="scss" scoped>

h3{
    cursor: pointer;
    font-size: 20px;
    color: #333;
    text-align: center;
    width: 175px;
    line-height: 90px;
    margin: auto;
    svg{
        float: left;
        width:90px;
        height: 90px;
    }
    &.active{
        color: var(--blue)
    }
}
.line::after{
    content: '';
    height: 70%;
    width:2px;
    background: #D9D9D9;
    right: 0;
    top: 90px;
    position:absolute;
}
.box{
    width:444px;
    height: 240px;
    margin: 20px auto;
    background: #fff;
    box-sizing: border-box;
    padding: 30px;
    text-align: center;
    h5{
        text-align: left;
        color: #666;
    }
    h6{
        font-size: 30px;
        margin: 30px 0 0;
    }
    button{
        margin-top: 20px;
        line-height: 35px;
        width:277px;
        background: #fff;
        color: var(--blue);
        border:1px solid var(--blue);
        border-radius: 6px;
        &:hover{
            box-shadow: 0 0 8px 1px rgba(76,141,235,.5);
        }
    }
    h4{
        font-size: 12px;
        text-align: left;
        margin: 20px 0 0;
        line-height: 25px;
        color: #666;
    }
    .flex{
        color: #999;
        font-size: 12px;
        p{
            margin-top: 40px;
        }
    }
    .ewm{
        width:80px;
        height: 80px;;
    }
}
</style>
<template>
    <div class="container share">
        <a id="share"></a>
        <!-- <p class="sub_title">现在分享邀请双方立享99元申请专利，最高可享免费申请</p> -->
        <div class="row">
            <div class="col-md-6 line">
                <h3 @mouseenter="hover=false" :class="{active:!hover}">
                    <svg viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g transform="translate(14.000000, 14.000000)" fill-rule="nonzero">
                                <rect id="Rectangle-path" fill="#000000" opacity="0" x="0" y="0" width="62" height="62"></rect>
                                <path d="M55.1111111,48.1428571 L41.3333334,48.1428571 C41.3333334,50.0364048 42.8754637,51.5714286 44.7777778,51.5714286 L49.9444445,51.5714286 C50.8956015,51.5714286 51.6666667,52.3389404 51.6666667,53.2857143 C51.6666667,54.2324881 50.8956015,55 49.9444445,55 L12.0555555,55 C11.1043985,55 10.3333333,54.2324881 10.3333333,53.2857143 C10.3333333,52.3389404 11.1043985,51.5714286 12.0555555,51.5714286 L17.2222222,51.5714286 C19.1245363,51.5714286 20.6666666,50.0364048 20.6666666,48.1428571 L6.8888889,48.1428571 C3.08426064,48.1428571 3.34391138e-08,45.0728097 0,41.2857143 L0,13.8571429 C-1.23075289e-15,10.0700474 3.08426062,7 6.8888889,7 L55.1111111,7 C58.9157394,7 62,10.0700474 62,13.8571429 L62,41.2857143 C62,45.0728097 58.9157394,48.1428571 55.1111111,48.1428571 Z M58.5555555,13.8571429 C58.5555555,11.9635952 57.0134252,10.4285714 55.1111111,10.4285714 L6.8888889,10.4285714 C4.98657476,10.4285714 3.44444445,11.9635952 3.44444445,13.8571429 L3.44444445,41.2857143 C3.44444445,43.179262 4.98657476,44.7142857 6.8888889,44.7142857 L55.1111111,44.7142857 C57.0134252,44.7142857 58.5555555,43.179262 58.5555555,41.2857143 L58.5555555,13.8571429 Z M51.6666666,41.2857143 L10.3333334,41.2857143 C8.43101921,41.2857143 6.8888889,39.7506906 6.8888889,37.8571429 L6.8888889,17.2857143 C6.88888894,15.3921666 8.43101924,13.8571429 10.3333334,13.8571429 L51.6666666,13.8571429 C53.5689808,13.8571429 55.1111111,15.3921666 55.1111111,17.2857143 L55.1111111,37.8571429 C55.1111111,39.7506906 53.5689808,41.2857143 51.6666666,41.2857143 Z" id="Shape" :fill="!hover?'var(--blue)':'#424242'"></path>
                            </g>
                        </g>
                    </svg>
                    web分享
                </h3>
                <div class="box">
                    <h5>
                        <img src="@/assets/share_face1.svg">
                        复制邀请码，快速生成邀请链接
                    </h5>
                    <h6 >{{unique_code || '******'}}</h6>
                    <p>我的邀请码</p>
                    <button type="button" @click="copy_unique">{{unique_code?'复制邀请链接':'注册账户'}}</button>
                </div>
            </div>

            <div class="col-md-6">
                <h3 @mouseenter="hover=true" :class="{active:hover}">
                    <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g id="网站" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="微信-copy" transform="translate(19.000000, 20.000000)" fill-rule="nonzero">
                                <rect id="Rectangle-path" fill="#000000" opacity="0" x="0" y="0" width="51" height="51"></rect>
                                <path d="M34.520625,17.7047181 C35.107125,17.7047181 35.6840625,17.7498274 36.2641875,17.8142693 C34.7023125,10.4614499 26.928,5 18.0508125,5 C8.128125,5 0,11.8340621 0,20.5176064 C0,25.5279632 2.703,29.6425777 7.222875,32.8388953 L5.41875,38.326122 L11.73,35.1298044 C13.98675,35.5776755 15.79725,36.0416571 18.0508125,36.0416571 C18.6181875,36.0416571 19.1791875,36.0158803 19.7338125,35.9739931 C19.3831875,34.7528193 19.176,33.47687 19.176,32.146145 C19.1791875,24.1746835 25.9494375,17.7047181 34.520625,17.7047181 Z M24.817875,12.7588032 C26.182125,12.7588032 27.0778125,13.6642117 27.0778125,15.0368239 C27.0778125,16.4029919 26.182125,17.3180667 24.817875,17.3180667 C23.4695625,17.3180667 22.1116875,16.4029919 22.1116875,15.0368239 C22.1116875,13.6609896 23.466375,12.7588032 24.817875,12.7588032 Z M12.1858125,17.3180667 C10.831125,17.3180667 9.466875,16.4029919 9.466875,15.0368239 C9.466875,13.6642117 10.831125,12.7588032 12.1858125,12.7588032 C13.5405,12.7588032 14.439375,13.6609896 14.439375,15.0368239 C14.439375,16.4029919 13.5405,17.3180667 12.1858125,17.3180667 Z M51,31.9270426 C51,24.6322209 43.777125,18.6874568 35.6649375,18.6874568 C27.074625,18.6874568 20.3139375,24.635443 20.3139375,31.9270426 C20.3139375,39.2411968 27.0778125,45.1666283 35.6649375,45.1666283 C37.4626875,45.1666283 39.276375,44.712313 41.0805,44.2547756 L46.0306875,47 L44.6728125,42.4375144 C48.297,39.6858458 51,36.0416571 51,31.9270426 Z M30.6860625,29.6425777 C29.790375,29.6425777 28.8819375,28.7403913 28.8819375,27.8188723 C28.8819375,26.9102417 29.790375,25.9951669 30.6860625,25.9951669 C32.0566875,25.9951669 32.946,26.9102417 32.946,27.8188723 C32.946,28.7403913 32.0566875,29.6425777 30.6860625,29.6425777 Z M40.615125,29.6425777 C39.7258125,29.6425777 38.8205625,28.7403913 38.8205625,27.8188723 C38.8205625,26.9102417 39.722625,25.9951669 40.615125,25.9951669 C41.973,25.9951669 42.8750625,26.9102417 42.8750625,27.8188723 C42.8750625,28.7403913 41.973,29.6425777 40.615125,29.6425777 Z" id="Shape" :fill="hover?'var(--blue)':'#424242'"></path>
                            </g>
                        </g>
                    </svg>
                    微信分享
                </h3>
                <div class="box" style="border: 3px solid var(--blue);background: #F9F9F9;">
                    <h5>
                        <img src="@/assets/share_face2.svg">
                        一键扫码，最高获取一年申请资格
                    </h5>
                    <h4>完成首次成功邀请，双方各奖励99元特价机会1次<br>邀请达3位好友额外奖励2次机会</h4>
                    <div class="flex between">
                        <p class="col">此活动仅限于外观平台</p>
                        <div id="qrCode" ref="qrCodeDiv" class="col ewm"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import QRCode from 'qrcodejs2';
import {inc_share_coupons} from "@/assets/api"
export default {
    props:['unique_code'],
    data(){
        return {
            is_share:1,
            hover:false,
        }
    },
    methods:{
         bindQRCode(){
            new QRCode(this.$refs.qrCodeDiv, {
                text:'http://'+this.host+'/m'+ (this.unique_code?'?invite_code='+this.unique_code:''),
                width: 80,
                height: 80,
                colorDark: "#333333", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel : QRCode.CorrectLevel.H
            })
        },
        copy_unique(){
            const str=this.$route.name==='activity'?'活动页-':'官网-'
            if(!this.unique_code){
                this.TJ_event(str+'注册账户')
                this.$router.push('login')
                return 
            }
            this.TJ_event(str+'复制邀请码')
            const client_id=localStorage.getItem('client_id')
            inc_share_coupons({client_id,activity_id:1})
            function copyToClipboard (text) {
                if(text.indexOf('-') !== -1) {
                    let arr = text.split('-');
                    text = arr[0] + arr[1];
                }
                var textArea = document.createElement("textarea");
                textArea.style.position = 'fixed';
                textArea.style.top = '0';
                textArea.style.left = '0';
                textArea.style.width = '2em';
                textArea.style.height = '2em';
                textArea.style.padding = '0';
                textArea.style.border = 'none';
                textArea.style.outline = 'none';
                textArea.style.boxShadow = 'none';
                textArea.style.background = 'transparent';
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.select();

                try {
                    var successful = document.execCommand('copy');
                    var msg = successful ? '网址已成功复制到剪贴板。现在发送给好友即可获取次数。' : '该浏览器不支持点击复制到剪贴板';
                alert(msg);
                } catch (err) {
                    alert('该浏览器不支持点击复制到剪贴板');
                }
                document.body.removeChild(textArea);
            }
            let txt=this.host+'/activity';
            if(this.unique_code){
                txt=txt+'?invite_code='+this.unique_code
            }
            copyToClipboard(txt)

        },
    },
    mounted(){
        this.$nextTick(function () {
            this.bindQRCode();
        })
    }
}
</script>
